<!DOCTYPE html>
<%@ include file="/common/taglibs.jsp"%>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta charset="UTF-8">
    <link rel="icon" href="<c:url value="/images/favicon.ico"/>"/>
    <title><decorator:title/> | <fmt:message key="webapp.name"/></title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

    <t:assets type="css"/>
    <link href="<c:url value='/styles/AdminLTE.min.css'/>" rel="stylesheet" type="text/css" />
    <link href="<c:url value='/styles/skin-blue.min.css'/>" rel="stylesheet" type="text/css" />
    <link href="<c:url value="/scripts/multi-select/css/multi-select.css"/> " rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="<c:url value='/styles/font-awesome/css/font-awesome.min.css'/>" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="<c:url value='/styles/ionicons.min.css'/>" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="<c:url value="/scripts/jstree/themes/default/style.min.css"/>" />
    <link href="<c:url value='/styles/custom.css'/>" rel="stylesheet" type="text/css" />
    <decorator:head/>
</head>
<body class="skin-blue-light sidebar-mini" <decorator:getProperty property="body.id" writeEntireProperty="true"/><decorator:getProperty property="body.class" writeEntireProperty="true"/>>
<div class="wrapper">
    <c:set var="currentMenu" scope="request"><decorator:getProperty property="meta.menu"/></c:set>
    <!-- Main Header -->
    <header class="main-header">
        <!-- Logo -->
        <a href="<c:url value='/'/>" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><fmt:message key="webapp.name"/></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><fmt:message key="webapp.name"/></span>
        </a>
        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <%@include file="/common/navigation.jsp"%>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <c:if test="${pageContext.request.remoteUser != null}">
            <div class="user-panel">
                <div class="pull-left image">
                    <i class="fa fa-user fa-4x text-primary"></i>
                </div>
                <div class="pull-left info">
                    <p>${pageContext.request.remoteUser}</p>

                    <a href="#"><i class="fa fa-circle text-success"></i> <fmt:message key="user.online"/></a>
                </div>
            </div>
                <!-- search form -->
                <security:authorize ifNotGranted="ROLE_DEALER_ADMIN,ROLE_DEALER_USER">
                <form action="globalSearch" method="get" class="sidebar-form">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="<fmt:message key="button.search"/>..."/>
              <span class="input-group-btn">
                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
                    </div>
                </form>
                </security:authorize>
                <!-- /.search form -->
            </c:if>
            <!-- Sidebar Menu -->
            <%@ include file="/common/sideMenu.jsp" %>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
            <decorator:body/>
    </div><!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="pull-right hidden-xs">
            <span><fmt:message key="webapp.version"/>
                <c:if test="${pageContext.request.remoteUser != null}">
                | <fmt:message key="user.status"/> ${pageContext.request.remoteUser}
            </c:if>
                </span>
        </div>
        <!-- Default to the left -->
        &copy; <fmt:message key="copyright.year"/> <a href="<fmt:message key="company.url"/>"><fmt:message key="company.name"/></a>
    </footer>

</div><!-- ./wrapper -->
<%--<div id="msgBox" title="">
    <p><fmt:message key="notifyDialog.message"/></p>
    <fmt:message key="loanRequest.number"/> :  <span id="reqNumber" style="font-weight: bold"></span>
    <a class="btn btn-default" id="requestLink" href=""><fmt:message key="notifyDialog.watch"/></a>
</div>--%>
<!-- REQUIRED JS SCRIPTS -->


<t:assets type="js"/>
<script src="/scripts/inputmask.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.inputmask.min.js" type="text/javascript"></script>
<script type='text/javascript' src="<c:url value='/dwr/interface/UserManager.js'/>"></script>
<script type='text/javascript' src="<c:url value='/dwr/engine.js'/>"></script>
<script type='text/javascript' src="<c:url value='/dwr/util.js'/>"></script>
<script type='text/javascript' src="<c:url value='/scripts/sockjs-0.3.min.js'/>"></script>
<script type='text/javascript' src="<c:url value='/scripts/stomp.js'/>"></script>
<script type="text/javascript" src="<c:url value="/scripts/multi-select/js/jquery.multi-select.js"/> " ></script>
<script type="text/javascript" src="<c:url value="/scripts/jstree/jstree.min.js"/> " ></script>
<%= (request.getAttribute("scripts") != null) ?  request.getAttribute("scripts") : "" %>


        <script type="text/javascript">
            (function( $ ) {
                $.widget( "custom.combobox", {
                    _create: function() {
                        this.wrapper = $( "<span>" )
                                .addClass( "custom-combobox" )
                                .insertAfter( this.element );

                        this.element.hide();
                        this._createAutocomplete();
                        this._createShowAllButton();
                    },

                    _createAutocomplete: function() {
                        var selected = this.element.children( ":selected" ),
                                value = selected.val() ? selected.text() : "";

                        this.input = $( "<input>" )
                                .appendTo( this.wrapper )
                                .val( value )
                                .attr( "title", "" )
                                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                                .autocomplete({
                                    delay: 0,
                                    minLength: 0,
                                    source: $.proxy( this, "_source" )
                                })
                                .tooltip({
                                    tooltipClass: "ui-state-highlight"
                                });

                        this._on( this.input, {
                            autocompleteselect: function( event, ui ) {
                                ui.item.option.selected = true;
                                this._trigger( "select", event, {
                                    item: ui.item.option
                                });
                            },

                            autocompletechange: "_removeIfInvalid"
                        });
                    },

                    _createShowAllButton: function() {
                        var input = this.input,
                                wasOpen = false;

                        $( "<a>" )
                                .attr( "tabIndex", -1 )
                                .attr( "title", "Show All Items" )
                                .tooltip()
                                .appendTo( this.wrapper )
                                .button({
                                    icons: {
                                        primary: "ui-icon-triangle-1-s"
                                    },
                                    text: false
                                })
                                .removeClass( "ui-corner-all" )
                                .addClass( "custom-combobox-toggle ui-corner-right" )
                                .mousedown(function() {
                                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                                })
                                .click(function() {
                                    input.focus();

                                    // Close if already visible
                                    if ( wasOpen ) {
                                        return;
                                    }

                                    // Pass empty string as value to search for, displaying all results
                                    input.autocomplete( "search", "" );
                                });
                    },

                    _source: function( request, response ) {
                        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                        response( this.element.children( "option" ).map(function() {
                            var text = $( this ).text();
                            if ( this.value && ( !request.term || matcher.test(text) ) )
                                return {
                                    label: text,
                                    value: text,
                                    option: this
                                };
                        }) );
                    },

                    _removeIfInvalid: function( event, ui ) {

                        // Selected an item, nothing to do
                        if ( ui.item ) {
                            return;
                        }

                        // Search for a match (case-insensitive)
                        var value = this.input.val(),
                                valueLowerCase = value.toLowerCase(),
                                valid = false;
                        this.element.children( "option" ).each(function() {
                            if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                                this.selected = valid = true;
                                return false;
                            }
                        });

                        // Found a match, nothing to do
                        if ( valid ) {
                            return;
                        }

                        // Remove invalid value
                        this.input
                                .val( "" )
                                .attr( "title", value + " didn't match any item" )
                                .tooltip( "open" );
                        this.element.val( "" );
                        this._delay(function() {
                            this.input.tooltip( "close" ).attr( "title", "" );
                        }, 2500 );
                        this.input.autocomplete( "instance" ).term = "";
                    },

                    _destroy: function() {
                        this.wrapper.remove();
                        this.element.show();
                    },
                    autocomplete : function(value, label) {
                        this.element.val(label);
                        this.input.val(value);
                    }
                });
            })( jQuery );
            $(function() {
                $("button").tooltip({
                    disabled: true
                });
                /*window.msgBox = $( "#msgBox" ).dialog({
                    autoOpen: false,
                    show: {
                        effect: "blind",
                        duration: 1000
                    },
                    hide: {
                        effect: "blind",
                        duration: 1000
                    },
                    position: { my: "right bottom", at: "right bottom"}
                });*/
            });
        </script>
<%--<c:choose>
    <c:when test="${pageContext.request.remoteUser != null}">
        <script>
            console.log("establishing socket");
            var websocket;
            if ('WebSocket' in window) {
                websocket = new WebSocket("ws://${pageContext.request.serverName}:${pageContext.request.serverPort}/webSocketServer");
            } else if ('MozWebSocket' in window) {
                websocket = new MozWebSocket("ws://${pageContext.request.serverName}:${pageContext.request.serverPort}/webSocketServer");
            } else {

                websocket = new SockJS("http://${pageContext.request.serverName}:${pageContext.request.serverPort}/sockjs/webSocketServer");
            }
            websocket.onopen = function (evnt) {
            };
            websocket.onmessage = function (evnt) {
                $("#msgcount").html(evnt.data);
                if (evnt.data){
                    $("#requestLink").attr('href', '/loanRequestform?reqId='+evnt.data);
                    $.ajax("/loanRequests/getLoanRequest?reqId="+evnt.data, {
                        success: function(data){
                            $("#reqNumber").html(data.number);
                            window.msgBox.dialog( "open" );
                        }
                    })

                }
            };
            websocket.onerror = function (evnt) {
            };
            websocket.onclose = function (evnt) {
            }


        </script>
    </c:when>
</c:choose>--%>

</body>